<template>
  <div class="leave-application">
    <h4 class="text-center">请假申请</h4>
    <form>
      <div class="form-group">
        <label>请假开始日期</label>
        <input type="date" class="form-control" v-model="startDate" required>
      </div>
      <div class="form-group">
        <label for="endDate">请假结束日期</label>
        <input type="date" class="form-control" v-model="endDate" required>
      </div>
      <div class="mb-3">
        <label for="type">请假类型</label>
        <select class="custom-select" v-model="absenttype">
          <option value="0">因公请假</option>
          <option value="1">年假</option>
          <option value="2">病假</option>
          <option value="3">婚假</option>
          <option value="4">产检假</option>
          <option value="5">产假</option>
          <option value="6">哺乳假</option>
          <option value="7">陪产假</option>
          <option value="8">事假</option>
        </select>
      </div>
      <div class="form-group">
        <label>详细理由</label>
        <textarea class="form-control" id="detailReason" rows="3" v-model="reason"></textarea>
      </div>
      <button type="submit" class="btn btn-primary" @click="submitForm">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'MyRights',
  data() {
    return {
      startDate: null,
      endDate: null,
      absenttype: null,
      reason: null
    }
  },

  methods: {
    submitForm() {
      // 在这里可以进行表单提交的逻辑处理
      var data = {
        e_ID: localStorage.getItem('token'),
        a_TYPE: this.absenttype,
        a_STATE: 1, // Assuming 0 represents pending state
        a_REASON: this.reason,
        a_RESPON: "",
        a_STTIME: this.startDate,
        a_ENDTIME: this.endDate,
        a_DEPARTMENT: localStorage.getItem('department'),
      };
      console.log(data)
      axios.post('/api/employee', data).then(res => {
        console.log(res)
        let isSuccess = res.data.data
        if (isSuccess) {
          alert("申请已提交")
          this.$router.push('/home/absentlist');
        } else {
          alert("申请的假期不符合规定，请修改申请并重新提交")
        }
      });
      console.log('提交表单');
      console.log('请假开始日期:', this.startDate);
      console.log('请假结束日期:', this.endDate);
      console.log('请假类型:', this.reason);
    },
    resetForm() {
      this.form={};
    }
  }
}
</script>

<style scoped>
.leave-application {
  /* display: flex; */
  flex-direction: column;
  align-items: center;
  margin-top: 30px;
}

.title {
  font-size: 48px;
  margin-bottom: 40px;
}

.form {
  width: 800px;
}

.el-form-item__label {
  font-weight: bold;
  font-size: 32px;
}

.el-radio-group {
  display: flex;
  flex-wrap: wrap;
}

.el-radio {
  margin-right: 40px;
  margin-bottom: 20px;
  font-size: 24px;
}
</style>